<template>
	<view>
		<Loding :isVisible="showMap"></Loding>
		<view class="content">
			<!-- 顶部tabs -->
			<view class="tabsDiv">
				<u-tabs :list="list" lineWidth="40rpx" lineHeight="5px" :activeStyle="{
						color: '#4d95ff',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
							color: '#606266',
						}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
					@change="$u.throttle(category($event), 5000)">
				</u-tabs>
			</view>
			<Map ref="childMap" :detailsHide="detailsHide" :confirmPage="confirmPage" v-show="mapHide == 0"
				@show="show"></Map>
			<List v-show="mapHide == 1" :list="fildData" :active='lisActive' @patternLocalization="patternLocalization">
			</List>
			<!-- 底部按钮 -->
			<my-tabbar class="tabbar" :chengCurrent="chengCurrent" @sectionChange="sectionChange" ref="myTable" />
			<uni-fab v-show="mapHide == 0" ref="fab" :pattern="pattern" :content="content" horizontal="right"
				:vertical="vertical" :direction="direction" @trigger="trigger" />
			<DataDetails ref="DataDetails" :speckleData="$store.state.user.attributes" @resetHeight="resetHeight">
			</DataDetails>
		</view>
	</view>
</template>

<script>
	import MyTabbar from "@/components/MyTabbar.vue"
	import Map from "@/components/Map.vue"
	import List from "@/components/list.vue"
	import Loding from "@/components/loading.vue"
	import DataDetails from "@/components/DataDetails.vue"
	import {
		UrlParamHash
	} from "@/utils/auth.js"
	import {
		GetLayersData,
		drawPattrenSport,
		searchAndDraw,
		//fillFeatulayer
		featureLayerRefresh,
		city,
		jumpPatternSpot
	} from '@/utils/initMap.js'
	import {
		getFeatureLayerUrl,
		getCategory,
		getServiceCode,
		getNewPlots
	} from "@/api/land.js"
	import {
		DataReduce
	} from '@/utils/useConfig.js'
	import {
		toast
	} from '@/utils/common'
	export default {
		data() {
			return {
				index_: 1,
				confirmPage: false,
				detailsHide: true,
				showMap: '',
				oldData: {
					index: 0,
					name: "全部"
				},
				count: 0,
				mapHide: 0,
				active: 0,
				mapUrl: '',
				chain: true,
				fildData: "",
				params: '',
				vertical: 'top',
				lisActive: '全部',
				pattern: {
					icon: "bars",
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				direction: 'vertical',
				content: [{
						iconPath: '/static/images/icon/where.png',
						selectedIconPath: '/static/images/icon/where-active.png',
						text: '地图',
						active: false
					},
					{
						iconPath: '/static/images/icon/yx.png',
						selectedIconPath: '/static/images/icon/yx-active.png',
						text: '影像',
						active: true
					},
				],
				list: [{
					name: '全部',
					disabled: true
				}, {
					name: '居住用地',
					disabled: true
				}, {
					name: '商业服务业用地',
					disabled: true
				}, {
					name: '工矿用地',
					disabled: true
				}, {
					name: '公共管理与公共服务用地',
					disabled: true
				}],
				chengCurrent: 0,
			}
		},
		options: {
			styleIsolation: 'shared',
		},
		components: {
			MyTabbar,
			Map,
			List,
			Loding,
			DataDetails
		},
		watch: {
			"$store.state.user.attributes": {
				handler(newVal, oldVal) {
					if (this.$store.state.user.route == 'pages/Land/details') return
					if (newVal) {
						this.$refs.DataDetails.move(1)
						this.detailsHide = false
					}
					if (!newVal) {
						this.$refs.DataDetails.move(2)
						this.detailsHide = true
					}
				},
				deep: true, //true 深度监听
			}
		},
		async onLoad() {
			this.extractToken()
			const serviceCode = await getServiceCode()
			this.showMap = 'block'
			const url = await getFeatureLayerUrl(serviceCode.msg);
			await this.$refs.childMap.int(url.data[0].serveUrl);

			this.getTopCategory(serviceCode.msg)
			this.$refs.DataDetails.getShowField(serviceCode.msg)
		},
		async onShow() {
			// this.showMap = 'block'

			// this.count++
			// const serviceCode = await getServiceCode()
			// if (this.count == 1) {
			// 	this.showMap = 'block'
			// 	// uni.showLoading({
			// 	// 	title: '地图加载中',
			// 	// 	mask: true
			// 	// });
			// 	const url = await getFeatureLayerUrl(serviceCode.msg);
			// 	await this.$refs.childMap.int(url.data[0].serveUrl);
			// 	// uni.hideLoading()
			// 	// setTimeout(function() {
			// 	// 	this.showMap = 'none'
			// 	// }, 900)
			// }

			// if (this.count != 1) {
			// 	uni.showLoading({
			// 		title: '地块返回中'
			// 	});
			// 	const url = await getFeatureLayerUrl(serviceCode.msg);
			// 	await this.$refs.childMap.int(url.data[0].serveUrl);
			// 	this.category(this.oldData)
			// 	console.log(this.$store.state.user.landParams.sql)
			// 	uni.hideLoading();
			// }

			// const _This = this;
			// uni.$on('refresh', (data) => {


			// })
		},
		// onUnload() {
		// 	uni.$off('refresh');
		// },
		methods: {
			resetHeight() {
				console.log('222')
				this.detailsHide = true
			},
			async sectionChange(index) {
				console.log(index)
				this.mapHide = index;
				if (index == 1) {
					if (this.lisActive == '全部') {
						let timer = setInterval(async () => {
							if (city) {
								let res = await GetLayersData('');
								this.fildData = await DataReduce(res, 'quyu');
								clearInterval(timer)
							}
						}, 500)
					}
				}
			},
			trigger(e) {
				this.content.forEach((item, index) => {
					if (index == e.index) {
						item.active = !e.item.active
					} else {
						item.active = false
					}
				})
				if (e.item.text === "地图") {
					this.$refs.childMap.tabs(0)
				} else {
					this.$refs.childMap.tabs(1)
				}

			},
			async category(data) {
				this.list.forEach(item => {
					item.canChange = false
				})
				if (this.showMap == 'block') {
					this.list.forEach(item => {
						item.canChange = true
					})
					return
				}

				this.$refs.DataDetails.move(2)
				this.resetHeight()
				this.oldData = data
				let params;
				if (data.name == '全部') {
					params = {
						sql: "1=1"
					};
				} else {
					if (!this.list[data.index].columnName) {
						let res = await getNewPlots()
						let newPlots = ' 1=2 '
						if (!res.data.length) {
							params = {
								sql: newPlots
							}
						} else {
							newPlots = ''
							res.data.forEach(item => {
								newPlots += ',' + item.glGisid
							})
							params = {
								sql: ' objectid in (' + newPlots.replace(',',
									'') + ')'
							}
							if (!newPlots) {
								params = {
									sql: ' 1=2 '
								}
							}
						}
					} else {
						params = {
							sql: `${this.list[0].columnName}='` + data.realName + "'"
						};
					}
				}
				params.featureType = 'tdtj'
				setTimeout(() => {
					this.$store.state.user.landParams = params
				}, 20)
				let res = await searchAndDraw(params);
				this.fildData = await DataReduce(res, 'quyu');
				this.lisActive = data.name;
				this.list.forEach(item => {
					item.canChange = true
				})





			},
			// 提取token
			extractToken() {
				let {
					token
				} = UrlParamHash(window.location.href)
				var reg = new RegExp("#/");
				console.log(token, 'token')
				token = token.replace(reg, "");
				if (token) {
					uni.setStorageSync("App-Token", token)
				}

			},
			// 获取顶部分类
			getTopCategory(codeValue) {
				const data = {
					serveCode: codeValue,
					code: 'tdtj_fl'
				}
				getCategory(data).then(res => {
					console.log(res.data, '顶部分类')
					this.list = res.data.map((item, index) => {
						return {
							name: item.showName,
							columnName: item.columnName,
							realName: item.realName,
							disabled: true
						}
					})
					console.log(this.list)
				})
			},
			show() {
				console.log('111')
				this.showMap = 'none'
				setTimeout(() => {
					this.list.forEach((item, index) => {
						item.disabled = false
					})
				}, 500)
			},
			async patternLocalization(objectid) {
				const res = await GetLayersData([{
					name: 'objectid',
					value: objectid,
					type: 'objectid',
					isEq: true,
				}])
				console.log(res)
				this.chengCurrent++
				this.mapHide = 0
				jumpPatternSpot(res[0].patternSpotGeo)
				this.$store.state.user.attributes = res[0]
				this.$store.state.user.speckleData = res[0]
			}
		},
		async mounted() {
			// uni.showLoading({
			// 	title: '地图加载中'
			// });
			// const url = await getFeatureLayerUrl();
			// uni.hideLoading()
			// this.$refs.childMap.int(url.data[0].serveUrl);
		},
	}
</script>
<style lang="scss">
	.content {
		width: 100vw;
		box-sizing: border-box;
		// height: calc(100vh - 178rpx);
		overflow: auto;
		// position: relative;
	}

	.tabsDiv {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.u-tabs {
		background-color: #fff;
	}

	.tabbar {
		position: fixed;
		bottom: 50rpx;
		left: 50rpx;
		right: 50rpx;
		z-index: 5;
	}

	::v-deep .uni-fab--rightTop {
		top: calc(45px + var(--window-top));
	}

	::v-deep .uni-fab__circle--rightTop {
		top: calc(45px + var(--window-top));
	}
</style>